<template>
  <div class="membership-package">
    <el-card>
      <el-form ref="ruleForm" :model="ruleForm" :inline="true" label-width="100px" class="ruleForm">
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="用户状态：" prop="userStatus">
          <el-select v-model="ruleForm.userStatus">
            <el-option label="全部" value="" />
            <el-option label="正常" value="ENABLE" />
            <el-option label="禁用" value="DISABLE" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="create">创建管理员</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="isLoading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="120"
          align="center"
        />
        <el-table-column
          prop="username"
          label="用户名"
          align="center"
        />
        <el-table-column
          prop="user_type"
          label="用户类型"
          align="center"
        />
        <el-table-column
          prop="last_login_time"
          label="最近登录时间"
          align="center"
        />
        <el-table-column
          label="状态"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.user_status | getMissionStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small" @click="handleDelete(scope.row, scope.$index)">删除</el-button> -->
            <el-button type="text" size="small" @click="handleUpdate(scope.row, scope.$index)">更新</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog title="创建/修改管理员" :visible.sync="dialogFormVisible" width="500px">
      <el-form ref="mealForm" :model="mealForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="mealForm.username" :disabled="isUpdate" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="mealForm.password" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="createSubmit('mealForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { normalAdminSearch, normalAdminSave, normalAdminUpdate } from '@/api/user'
export default {
  filters: {
    getMissionStatus(status) {
      let StringType = ''
      switch(status) {
        case 'ENABLE' :
          StringType = '正常'
          break
        case 'CANCELLED' :
          StringType = '已取消'
          break
      }
      return StringType
    }
  },
  data() {
    return {
      ruleForm: {
        pageNumber: 1
      },
      tableData: [],
      total: 0,
      isLoading: false,
      mealForm: {},
      dialogFormVisible: false,
      isUpdate: false,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.normalAdminSearch()
  },
  methods: {
    normalAdminSearch() {
      this.isLoading = true
      normalAdminSearch(this.ruleForm).then(res => {
        this.tableData = res.list
        this.total = res.totalRow
        this.isLoading = false
      }).catch(() => {
        this.isLoading = false
      })
    },
    createSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isUpdate) {
            normalAdminUpdate(this.mealForm).then(res => {
              this.$message({
                type: 'success',
                message: '更新成功!'
              })
              this.normalAdminSearch()
            })
          } else {
            normalAdminSave(this.mealForm).then(res => {
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
              this.ruleForm.pageNumber = 1
              this.normalAdminSearch()
            })
          }
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // handleDelete(row, index) {
    //   this.$confirm('是否删除此账号?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     memberPackageDelete({
    //       id: row.id
    //     }).then(res => {
    //       this.$message({
    //         type: 'success',
    //         message: '删除成功!'
    //       })
    //       this.tableData.splice(index, 1)
    //     })
    //   })
    // },
    handleUpdate(row) {
      const { username, id } = row
      this.mealForm = {
        id,
        username
      }
      this.dialogFormVisible = true
      this.isUpdate = true
    },
    onSubmit() {
      this.ruleForm.pageNumber = 1
      this.normalAdminSearch()
    },
    create() {
      this.mealForm = {}
      // this.$refs['mealForm'].resetFields()
      this.dialogFormVisible = true
      this.isUpdate = false
    },
    handleCurrentChange(page) {
      this.ruleForm.pageNumber = page
      this.normalAdminSearch()
    }
  }
}
</script>
<style lang="scss">
.membership-package {

}
</style>

